import { Component, ReactNode } from "react";
import { View, Text, Image, ScrollView } from "@tarojs/components";
import { AtButton } from "taro-ui";
import Taro from "@tarojs/taro";
import i2 from "./images/i2.png";
import i3 from "./images/i3.png";
import i4 from "./images/i4.png";
import i6 from "./images/i6.png";

import "./index.scss";
import Req, { BASE_URL } from "../../utils/request";
export default class IssueDetail extends Component {
  state = {
    current: 0,
    day: "-",
    findDate: "/",
    memo: "",
    img: "",
    state: "",
    reactionList: [],
  };
  initData = () => {
    const { router } = Taro.getCurrentInstance();
    if (router?.params.id) {
      Req.get(`/project/supervision/${router.params.id}`).then((r) => {
        if (r.code === 200) {
          this.setState({
            day: r.data.day,
            findDate: r.data.findDate,
            memo: r.data.problem,
            img: r.data.img,
            state: r.data.state,
            reactionList: r.data.reactionList,
          });
        }
      });
    }
    // const {router} = Taro.getIn
  };

  componentDidMount(): void {
    this.initData();
    Taro.eventCenter.on("refreshData", this._onBackRefresh);
  }
  componentWillUnmount(): void {
    Taro.eventCenter.off("refreshData", this._onBackRefresh);
  }
  _onBackRefresh = (v) => {
    if (v.force) {
      this.initData();
    }
  };
  render(): ReactNode {
    const { day, findDate, memo, img, state, current, reactionList } =
      this.state;
      const _stateImgs = {
        0: "#7E7E7E",
        1: "#F68B49",
        2: "#5ACAAA",
        3: "#7E7E7E",
      };
    const _states = {
      0: "已退回",
      1: "待整改",
      2: "进行中",
      3: "已结束",
    };

    const _getImgs = (img: string) => {
      if (img) {
        return img.split(",").map((e) => {
          return BASE_URL + e;
        });
      }
      return [];
    };
    return (
      <View className="id-container">
        <ScrollView
          enhanced
          showScrollbar={false}
          className="id-main-wrapper"
          scrollY
        >
          <View className="id-main-day">
            <Text className="id-main-day-t1">
              整改期限丨<Text className="id-main-day-t2">{day}</Text>
            </Text>
          </View>
          <View className="id-main-d2">
            <Text className="id-main-d2-t1">时间丨{findDate}</Text>
            <Text className="state-tag" style={{
              backgroundColor:_stateImgs[state]
            }}>{_states[state]}</Text>
          </View>
          <View>
            {(state == "0" || state == "3") && (
              <View className="tabs-detail-bar">
                <Text
                  onClick={() => {
                    this.setState({
                      current: 0,
                    });
                  }}
                  className={
                    current === 0 ? "tdb-item tdb-item-active" : "tdb-item"
                  }
                >
                  备注
                </Text>
                <Text
                  onClick={() => {
                    this.setState({
                      current: 1,
                    });
                  }}
                  className={
                    current === 1 ? "tdb-item tdb-item-active" : "tdb-item"
                  }
                >
                  整改
                </Text>
              </View>
            )}

            {current === 0 && (
              <View>
                <Text className="id-m-content">{memo}</Text>
                <View>
                  {_getImgs(img).map((item, index) => (
                    <Image
                      key={index}
                      mode="widthFix"
                      style={{
                        width: "100%",
                      }}
                      src={item}
                    />
                  ))}
                </View>
              </View>
            )}
            {current === 1 && (
              <View>
                {reactionList.map((item: any, index) => {
                  return (
                    <View key={index} className="zhenggai-list-item">
                      <Text className="zli-t1">{item.memo}</Text>
                      {_getImgs(item.reactionImg).map((e, i) => (
                        <Image
                          key={i}
                          className="zli-i1"
                          src={e}
                        />
                      ))}
                      <View className="zli-v1">
                        <Text className="zli-t2">
                          日期 | {item.reactionTime}
                        </Text>
                      </View>
                    </View>
                  );
                })}
              </View>
            )}
          </View>
        </ScrollView>
        <View className="bottom-btns">
          {/* <AtButton
            onClick={() => {
              Taro.showModal({
                title: "提示",
                content: "确认删除？",
                success: (res) => {
                  if (res.confirm) {
                    const { router } = Taro.getCurrentInstance();
                    if (router?.params.id) {
                      Req.post(`/project/supervision/${router.params.id}`).then(
                        (r) => {
                          if (r.code === 200) {
                            Taro.eventCenter.trigger("refreshData", {
                              force: true,
                            });
                            Taro.navigateBack();
                          }
                        }
                      );
                    }
                  }
                },
              });
            }}
            className="info-btn-color"
            circle
            type="primary"
          >
            删除
          </AtButton> */}
          <AtButton
            onClick={() => {
              const { router } = Taro.getCurrentInstance();
              if (router?.params.id) {
                Taro.navigateTo({
                  url: "/pages/issue-form/index?id="+router.params.id,
                });
              }
            }}
            className="primary-btn-color"
            circle
            type="primary"
          >
            编辑
          </AtButton>
          {(this.state.state == "1" || this.state.state == "0") && (
            <AtButton
              onClick={() => {
                const { router } = Taro.getCurrentInstance();
                if (router?.params.id) {
                  Taro.navigateTo({
                    url: "/pages/regulatory-form/index?id=" + router.params.id,
                  });
                }
              }}
              className="primary-btn-color"
              circle
              type="primary"
            >
              整改
            </AtButton>
          )}
        </View>
      </View>
    );
  }
}
